<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        text {
            /*文本水平居中*/
            text-anchor: middle;
            dominant-baseline: middle;
        }

        body {
            text-align: center;
        }
    </style>
</head>

<body>
    <svg xmlns="http://www.w3.org/2000/svg" height="700" width="700">
        <!-- 设置底色的圆环 -->
        <circle cx="350" cy="350" r="25" fill="none" stroke="grey" opacity="0.2" stroke-width="5"
            stroke-linecap="round"></circle>
        <!-- 设置进度条 -->
        <circle class="progress" transform="rotate(-90,350,350)" cx="350" cy="350" r="25" fill="none" stroke="rgb(88, 198, 205)"
            stroke-width="5" stroke-linecap="round" stroke-dasharray="0,1000"></circle>
        <!-- stroke-dasharray:一个表示长度，一个表示间距 -->
        <!-- 设置文本 -->
        <text class="text" x="350" y="350" font-size="15" fill="black">36</text>
    </svg>
    <script>
        // 获取进度条对象
        const progressDom = document.querySelector(".progress")
        // 获取文本对象
        const textDom = document.querySelector(".text")
        function rotateCircle(percent) {
            // 获取svg圆形环的总长，通过获取半径长度算出总长
            let circleLength = Math.floor(2 * Math.PI * parseFloat(progressDom.getAttribute("r")))
            // 按照百分比，算出进度环的长度
            let value = percent * circleLength / 100
            // red  rgb 255,0,0
            // blue rgb 0,191,255
            let red = 255 + parseInt((0 - 255) / 100 * percent)
            let green = 255 + parseInt((191 - 0) / 100 * percent)
            let blue = 0 + parseInt((255 - 0) / 100 * percent)
            // 设置stroke-dasharray和路径的颜色
            progressDom.setAttribute("stroke-dasharray", value + ",1000")
            progressDom.setAttribute("stroke", `rgb(88, 198, 205)`)
            // 设置文本内容和颜色
            textDom.innerHTML = percent + "%"
            textDom.setAttribute("fill", `black`)
        }
        // 30毫秒变化将进度+1
        let num = 0
        setInterval(() => {
            num++
            if (num > 100) {
                num = 0
            }
            rotateCircle(num)
        }, 100)
    </script>
</body>

</html>